<template>
  <wd-popup custom-class="popup-custom" v-model="show" custom-style="border-radius:32rpx;">
    <wd-card title="选择支付方式">
      <view class="plyment-select">
        <wd-button block @click="handleSelect('wechat')">微信支付</wd-button>
        <wd-button block @click="handleSelect('bank')">对公转账</wd-button>
      </view>
      <template #footer>
        <view class="payment-footer">
          <wd-button block type="info" @click="handleCancel">取消</wd-button>
        </view>
      </template>
    </wd-card>
  </wd-popup>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

const emit = defineEmits(['select', 'cancel'])

const open = () => {
  show.value = true
}

const handleSelect = (type) => {
  emit('select', type)
  show.value = false
}

const handleCancel = () => {
  show.value = false
  emit('cancel')
}

defineExpose({
  open,
})
</script>

<style scoped>
:deep(.popup-custom) {
  width: 90%;
}
:deep(.wd-card__title) {
  text-align: center;
}

.plyment-select {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>